<template>
    <app-layout title="我要提现">
        <view class="withdraw-section">
            <view class="title">上传收款码</view>
            <view class="section-content-box">
                <view class="upload-image" @click="uploadQrCode">
                    <image v-if="qrcode" class="icon" :src="qrcode" mode="aspectFill" />
                    <view v-if="!qrcode" class="icon">
                        <text class="iconfont icon-shangchuantupian"></text>
                        <view class="text">收款码</view>
                    </view>
                </view>
            </view>
            <view class="total-box">
                <text class="text">可提现金额：</text>
                <text class="num">¥ {{ userInfo.serviceData.disposableBalance }}</text>
            </view>
        </view>
        <view class="withdraw-section withdraw-desc">
            <view class="title">提现说明</view>
            <view class="content">
                <rich-text :nodes="explain"></rich-text>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">确定提现</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
    name: "member-cash-withdraw",
    data() {
        return {
            balance: 0,
            qrcode: "",
            explain: "",
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.info,
        }),
    },
    onLoad() {},
    async onShow() {
        await this.$store.dispatch("user/info", true);
        this.$models.user.withdrawExplain().then((data) => {
            this.explain = data.tixian_content;
        });
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        uploadQrCode() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.qrcode = response.img;
                    });
                });
            });
        },
        submit() {
            if (!this.qrcode) {
                return this.$utils.toast("请上传收款码");
            }
            this.$models.user
                .withdraw(this.qrcode)
                .then((response) => {
                    this.$utils.toast(response.msg);
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.withdraw-section {
    width: 100%;
    box-sizing: border-box;
    padding: 38rpx 46rpx;
    background-color: #ffffff;
    .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #2d2d2d;
        line-height: 30rpx;
    }
    .total-box {
        line-height: 30rpx;
        .text {
            font-size: 30rpx;
            color: #333333;
        }
        .num {
            font-weight: bold;
            color: #fb3636;
        }
    }
}
.withdraw-desc {
    margin-top: 28rpx;
    .content {
        font-size: 26rpx;
        color: #999999;
        line-height: 40rpx;
        padding: 50rpx 0 80rpx 0;
    }
}
.section-content-box {
    margin: 40rpx 0;
    .upload-image {
        display: inline-block;
        border: 1rpx solid #999999;
    }
    .image,
    .icon {
        width: 136rpx;
        height: 136rpx;
    }
    .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .iconfont {
            font-size: 60rpx;
            color: #999999;
            line-height: 60rpx;
        }
        .text {
            font-size: 24rpx;
            color: #999999;
            line-height: 24rpx;
            margin-top: 16rpx;
        }
    }
}
</style>